<#assign pageTitle = "合作教师加入" />
<#assign pageHeader>
	<link href="/static/qdxwx/teacher_verify/css/gloab.css" rel="stylesheet">
	<link href="/static/qdxwx/teacher_verify/css/index.css" rel="stylesheet">
	<script src="/static/qdxwx/teacher_verify/js/register.js"></script>
<style>
		.item-ifo select{
			height: 36px;
		}
		.item-ifo select option{
			height: 36px;
		}
	.step .col-xs-3{
		width: 32%!important;
	}
	.subject-select{
		float: left;
		margin-bottom: 23px;
		margin-top: -8px;
		width: 292px;
        }

</style>
</#assign>
<#assign pageContent>
<div class="bg-fa of" style="background-color: rgb(244, 244, 247);padding-top: 20px">
	<div class="login-box f-mt10 f-pb50">
		<div class="main bgf">
			<div class="reg-box-pan display-inline">
				<div class="step">
					<ul>
						<li class="col-xs-3 on">
							<span class="num"><em class="f-r5"></em><i>1</i></span>
							<span class="line_bg lbg-r"></span>
							<p class="lbg-txt">填写基本信息</p>
						</li>
						<li class="col-xs-3">
							<span class="num"><em class="f-r5"></em><i>2</i></span>
							<span class="line_bg lbg-l"></span>
							<span class="line_bg lbg-r"></span>
							<p class="lbg-txt">填写教育信息</p>
						</li>
						<li class="col-xs-3">
							<span class="num"><em class="f-r5"></em><i>3</i></span>
							<span class="line_bg lbg-l"></span>
							<p class="lbg-txt">资料提交成功</p>
						</li>
					</ul>
				</div>
				<form  id="saveTeacherForm">
				<div class="reg-box" id="verifyCheck" style="margin-top:20px;">
					<div class="part1">
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>昵称：</span>
							<div class="f-fl item-ifo">
								<input type="text" maxlength="20" name="name" class="txt03 f-r3 required"  data-valid="isNonEmpty||between:2-20" data-error="昵称不能为空||用户名长度2-20位"/>
								<label class="layui-icon layui-icon-ok-circle blank hide"></label>
								<label class="focus"><span>输入名称2-20位</span></label>
								<label class="focus valid"></label>
							</div>
						</div>
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>手机号：</span>
							<div class="f-fl item-ifo">
								<input type="text" id="mobile" name="mobile" class="txt03 f-r3 required" keycodes="tel" tabindex="4" data-valid="isNonEmpty||isPhone" data-error="手机号码不能为空||手机号码格式不正确" maxlength="11" id="phone" />
								<label id="mobileBlank" class="layui-icon layui-icon-ok-circle blank hide"></label>
								<label id="mobileFocus" class="focus">请填写11位有效的手机号码</label>
								<label id="mobileValid" class="focus valid"></label>
							</div>
						</div>
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>头像路径：</span>
							<div class="f-fl item-ifo">
								<input type="text" id="avatarUrl" name="avatar" class="txt03 f-r3 required" tabindex="7" data-valid="isNonEmpty" data-error="请上传头像"/>
								<input type="file" id="PicClick" onchange="imgSave()" name="file" style="display: none">
								<div  class="layui-btn layui-btn-normal" onclick="picClick()">点击上传</div>
								<label class="focus valid"></label>
							</div>
						</div>
						<div class="item col-xs-12"style="height:140px; display: none;" id="imgBike">
							<span class="intelligent-label f-fl">头像预览：</span>
							<div class="f-fl item-ifo">
								<img id="showImage" style="width: 200px;height: 117px" />
							</div>
						</div>
						<div class="item col-xs-12" style="height: 160px">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>个人简介：</span>
							<div class="f-fl item-ifo">
								<textarea name="intro"  class="txt03 f-r3 required" tabindex="8" data-valid="isNonEmpty" data-error="个人简介不能为空"></textarea>
								<label class="focus"><span>请输入个人简介</span></label>
								<label class="focus valid"></label>
							</div>
						</div>
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl">&nbsp;</span>
							<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-lg" id="btn_part1">下一步</a>
						</div>
					</div>
					<div class="part2" style="display:none">
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>毕业学校：</span>
							<div class="f-fl item-ifo">
								<input type="text" name="finalSchool" maxlength="50"  class="txt03 f-r3 required" tabindex="9" data-valid="isNonEmpty" data-error="毕业学校不能为空"/>
								<label class="layui-icon layui-icon-ok-circle blank hide"></label>
								<label class="focus"><span>输入最后的毕业学校</span></label>
								<label class="focus valid"></label>
							</div>
						</div>
						<div class="col-xs-12">
							<span class="intelligent-label f-fl" style="float: left"><b class="ftx04">*</b>专业：</span>
							<div class="subject-select layui-col-md3">
								<input type="text" id="tree"  name="categoryId"  value="" lay-filter="tree" class="layui-input">
							</div>
						</div>
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>职称：</span>
							<div class="f-fl item-ifo">
								<input type="text" name="title" maxlength="50" class="txt03 f-r3 required" tabindex="11" data-valid="isNonEmpty" data-error="职称不能为空"/>
								<label class="layui-icon layui-icon-ok-circle blank hide"></label>
								<label class="focus"><span>输入职称</span></label>
								<label class="focus valid"></label>
							</div>
						</div>
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>教龄：</span>
							<div class="f-fl item-ifo">
								<input type="number" name="teachYear"  class="txt03 f-r3 required" tabindex="12" data-valid="isNonEmpty" data-error="教龄不能为空"/>
								<label class="layui-icon layui-icon-ok-circle blank hide"></label>
								<label class="focus"><span>输入教龄</span></label>
								<label class="focus valid"></label>
							</div>
						</div>
						<div class="item col-xs-12" style="height: 160px">
							<span class="intelligent-label f-fl"><b class="ftx04">*</b>教师资历：</span>
							<div class="f-fl item-ifo">
								<textarea name="education"  class="txt03 f-r3 required" tabindex="16" data-valid="isNonEmpty" data-error="教师资历不能为空" ></textarea>
								<label class="focus"><span>输入教师资历说明</span></label>
								<label class="focus valid"></label>
							</div>
						</div>
						<div class="item col-xs-12">
							<span class="intelligent-label f-fl">&nbsp;</span>
							<a href="javascript:;" class="layui-btn layui-btn-danger layui-btn-lg" id="btn_part2">下一步</a>
						</div>
					</div>
					</div>
				</form>
					<div class="part3 text-center" style="display:none">
						<h3>您的资料已经提交成功，请耐心等待平台审核</h3>
						<br/>
						<h3>平台审核完后会有短信通知到您！</h3>
						<p class="c-666 f-mt30 f-mb50">页面将在 <strong id="times" class="f-size18">10</strong> 秒钟后，回到 <a href="/" class="c-blue">主页</a></p>
					</div>
				</div>
			</div>
		</div>
   </div>
</div>
<div class="m-sPopBg" style="z-index:998;"></div>
<script src="/static/libs/layui-v2.6.8/layui.js" charset="utf-8"></script>
<script src="/static/libs/jquery/jquery-3.6.0.min.js" charset="utf-8"></script>
<script type="text/javascript">
	layui.config({
		base:  "/static/libs/layui-v2.6.8/modules/",
		version: true
	}).extend({
		treeSelect: 'treeSelect/treeSelect',
	});
	layui.use(['form', 'treeSelect'], function () {
		var $ = layui.jquery
				, form = layui.form
				, layer = layui.layer
				,treeSelect = layui.treeSelect

		treeSelect.render({
			elem: '#tree',
			data: '/teacher/ztree.json',
			type: 'get',
			placeholder: '请选择专业',
			search: true, //是否开启搜索功能：true/false，默认false
			style: {
				folder: {
					enable: false
				},
				line: {
					enable: true
				}
			},
			// 点击回调
			click: function(d){
				// console.log(d);
			},
			success: function (d) {
				treeSelect.checkNode('tree', 0);
			}
		});
	});


	function picClick(){
		$('#PicClick').trigger("click");
	}
	function demoClick(){
		$("#DemoClick").click();
	}

	function mobilesCheck() {

	}

	function imgSave(){
		var formData = new FormData();
		formData.append('file', $("#PicClick")[0].files[0]); //获取图片信息
		formData.append('param', "teacher");
		formData.append('cutImg', "true");
		formData.append('width', "288");
		formData.append('height', "258");
		$.ajax({
			url: "/teacher/upload.json",
			type: 'POST',
			data: formData,
			cache: false,
			dataType: 'json',
			contentType: false,
			processData: false,
			enctype: "multipart/form-data",
			success: function (data) {
				if (data.code == 0) {
					$("#avatarUrl").val(data.msg);
					$("#showImage").attr("src", data.msg);
					$("#imgBike").show();
				} else {
					alert(data.msg);
				}
			},
			error: function (e) {
				alert("upload error!");
			}
		});
	}

	function DemoClickUrl(){
		var formData = new FormData();
		formData.append('fileupload', $("#DemoClick")[0].files[0]); //获取图片信息
		formData.append('param', "teacherFile");
		$.ajax({
			url: "/image/uploadfile/all",
			type: 'POST',
			data: formData,
			cache: false,
			dataType: 'json',
			contentType: false,
			processData: false,
			enctype: "multipart/form-data",
			success: function (data) {
				if (data.code === 0) {
					$("#samplePathUrl").val(data.src);
				} else {
					alert(data.msg);
				}
			},
			error: function (e) {
				alert("upload error!");
			}
		});
	}

	$(function(){
		//第一页的确定按钮
		$("#btn_part1").click(function(){
			if(!verifyCheck._click()) return;
			var mobile =$("#mobile").val();
			$.post("/teacher/check.json",{mobile:mobile},function(json){
				if(json.code === 0){
					$(".part1").hide();
					$(".part2").show();
					$(".step li").eq(1).addClass("on");
				}else {
					$("#mobileBlank").addClass("hide");
					$("#mobile").addClass("v_error");
					$("#mobileValid").text(json.msg)
				}
			})

		});
		//第二页的确定按钮
		$("#btn_part2").click(function(){
			if(!verifyCheck._click()) return;
			var formData = $('#saveTeacherForm').serialize();
			$.post("/teacher/join.json",formData,function(json){
				if(json.code === 0){
					$(".part2").hide();
					$(".part3").show();
					$(".step li").eq(2).addClass("on");
					countdown({
						maxTime:10,
						ing:function(c){
							$("#times").text(c);
						},
						after:function(){
							window.location.href="/";
						}
					});
				}else {
					alert(json.msg);
				}
			});
		});
	});
	function showoutc(){$(".m-sPopBg,.m-sPopCon").show();}
	function closeClause(){
		$(".m-sPopBg,.m-sPopCon").hide();
	}
</script>
</#assign>
<#include "../layouts/layout.ftl">